<template>
  <!-- 移动端页面外层布局 -->
  <div class="layout-container" :class="{ pc: !isMobile }">
    <!-- 头部标题栏 -->
    <transition :name="`navbar-${direction}`">
      <div :key="$route.path">
        <van-nav-bar
          v-show="navbarShow"
          :title="title"
          fixed
          :left-arrow="navbarBackShow"
          :left-text="goHomeShow ? '回到首页' : ''"
          @click-left="back"
        />
      </div>
    </transition>

    <!-- 中间内容区域 -->
    <transition :name="`main-${direction}`">
      <keep-alive>
        <DivRouterView
          :key="$route.path"
          ref="routerView"
          :style="mainStyle"
          class="main-content"
        />
      </keep-alive>
    </transition>

    <!-- 底部tabbar栏 -->
      <div :key="$route.path">
        <van-tabbar
          v-show="tabbarShow"
          v-model="active"
          route
          fixed
          @change="change"
        >
          <van-tabbar-item
            v-for="item in tabbar"
            :key="item.name"
            :to="item.path"
          >
            <span> {{ item.meta.text }}</span>
            <template #icon="props">
              <img v-if="props.active" :src="item.meta.iconActive" />
              <img v-else :src="item.meta.icon" />
            </template>
          </van-tabbar-item>
        </van-tabbar>
      </div>
  </div>
</template>

<script>
import tabbar from "@/router/tabbar3";
import { pxtorem } from "@/utils/rem";
import { mapGetters } from "vuex";

export default {
  components: {
    DivRouterView: () => import("./DivRouterView.vue"),
  },
  data() {
    return {
      tabbar,
      active: null,
      direction: "right",
      removeRouterBeforeEach: () => {},
      removeRouterAfterEach: () => {},
      delLastRouter: this.$router.delLastRouter.bind(this.$router),
    };
  },

  computed: {
    //是否移动端
    ...mapGetters(["isMobile"]),
    //顶部的navbar导航是否显示
    navbarShow() {
      if (Object.prototype.hasOwnProperty.call(this.$route.meta, "navbar")) {
        return this.$route.meta.navbar;
      }
      return this.tabbar.every((item) => item.path !== this.$route.path);
    },
    //底部的tabbar导航是否显示
    tabbarShow() {
      if (Object.prototype.hasOwnProperty.call(this.$route.meta, "tabbar")) {
        return this.$route.meta.tabbar;
      }
      return this.tabbar.some((item) => item.path === this.$route.path);
    },
    //中间class="main"区域的高度
    mainStyle() {
      const navbarHeight = this.navbarShow ? 92 : 0;
      const tabbarHeight = this.tabbarShow ? 50 : 0;
      return {
        paddingTop: `${navbarHeight}px`,
        paddingBottom: `${tabbarHeight}px`,
      };
    },
    //navbar的文字
    title() {
      return this.$route.meta.text;
    },
    //是否展示navbar返回首页的按钮
    goHomeShow() {
      return (
        !this.tabbar.some((item) => item.path === this.$route.path) &&
        this.$store.getters.historyRouter.length === 0
      );
    },
    //是否展示navbar返回图标
    navbarBackShow() {
      return (
        !this.tabbar.some((item) => item.path === this.$route.path) &&
        this.$store.getters.historyRouter.length > 0
      );
    },
  },

  created() {
    // 监听浏览器回退事件
    window.addEventListener("popstate", this.delLastRouter);
    //添加路由守卫，在路由跳转之前
    this.removeRouterBeforeEach = this.$router.beforeEach((to, from, next) => {
      //修改过渡动画
      this.direction = this.$store.getters.direction;
      next();
    });
    //添加路由守卫，在路由跳转之后
    this.removeRouterAfterEach = this.$router.afterEach((to) => {
      //路由跳转完成后将动画设置为right默认值，保证使用浏览器自带返回键时的效果
      this.$store.commit("mRouter/setDirection", "right");
      const keepAlive = this.$refs.routerView.$vnode.parent.componentInstance;

      const { cache, keys } = keepAlive;
      Object.keys(cache).forEach((key) => {
        const component = cache[key];
        const path = component.componentInstance.$vnode.data.key;
        //如果路径不是tabbar，也不是在router的historyRouter缓存中的，也不是当前跳转的路径，则删除该key在keep-alive的缓存
        if (
          !this.tabbar.some((item) => item.path === path) &&
          !this.$store.getters.historyRouter.some(
            (item) => item.path === path
          ) &&
          to.path !== path
        ) {
          component.componentInstance.$destroy();
          delete cache[key];
          const index = keys.indexOf(key);
          keys.splice(index, 1);
        }
      });
    });
  },
  mounted() {
  },
  beforeDestroy() {
    //移除路由守卫
    this.removeRouterBeforeEach();
    this.removeRouterAfterEach();
    //取消监听浏览器回退事件
    window.removeEventListener("popstate", this.delLastRouter);
  },
  methods: {
    change(value) {
      console.log("yabbar", value);
      console.log('????',this.active)
    },
    //返回按钮
    back() {
      if (this.goHomeShow) {
        this.$router.replace("/home");
      } else {
        this.$router.back();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
//导入页面切换过渡动画
@import "@/styles/transition.scss";
.layout-container {
  height: 100vh;
  position: relative;

  .main-content {
    background: #f7f7f7;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

// 以下是PC端样式
.pc {
  width: 750px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  height: 100vh;

  .van-nav-bar {
    position: absolute;
  }

  .van-tabbar {
    position: absolute;
    z-index: 9999;
  }

  .main-content {
    margin: 0 -17px -17px 0;
  }
}
.van-tabbar--fixed{
 // z-index: 9999;
}
</style>